<template>
  <div class="min-h-screen bg-gradient-to-br">

    <!-- 主内容区 -->
    <main class="container mx-auto px-4 py-8">

      <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">

        <!-- 左侧区域 (30%) -->
        <div class="lg:col-span-3 space-y-6">
          <!-- 广告位轮播 -->
          <AdCarousel/>
        </div>

        <!-- 中间区域 (50%) -->
        <div class="lg:col-span-7 space-y-6">
          <!-- 帖子列表 -->
          <PostList pageType="square" />
        </div>

        <!-- 右侧区域 (20%) -->
        <div class="lg:col-span-2 space-y-6">

        </div>

      </div>
    </main>

  </div>
</template>

<script>
import PostList from "@/components/PostList.vue";
import AdCarousel from "@/components/AdCarousel.vue";


export default {
  name: "Square",
  components: {AdCarousel, PostList},
  data() {
    return {
    };
  },
  methods: {

  },
};
</script>

<style scoped>

</style>